<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
<link rel="stylesheet" href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
<title>商家列表</title>
<script src="<%=basePath%>assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>assets/js/fontSize.js"></script>

<style>
body {
	padding-top: 0.8rem;
	padding-bottom: 1rem;
}

.header {
	background: #fff;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	box-shadow: 0 2px 2px #ECECEC;
	z-index: 3
}

.header_bot ul li {
	padding: 0 0.2rem;
	border-bottom: #fff solid 0.05rem;
	display: inline-block;
    height: 0.65rem;
    line-height: 0.8rem;
}

.header_bot ul li.active {
	border-bottom: #FF3F25 solid 0.05rem;
}

.header_bot ul li a {
	font-size: 0.26rem;
	line-height: 0.6rem;
}
.header_bot ul li.active a{
	color: #FF3F25;
}

.paixu {
	border-bottom: 1px solid #f8f8f8
}

.paixu ul li {
	float: left;
	padding: 0 0.3rem;
}

.paixu ul li a {
	font-size: 0.24rem;
	line-height: 0.6rem;
}

.content_cont ul li {
	padding: 3%;
	border-bottom: 1px solid #f1f1f1
}

.shangjiatupian {
	width: 26%;
    height: 0;
    float: left;
    padding-bottom: 26%;
    background-size: 100%;
    background-position: center center;
}

.shangjiatupian img {
	width: 100%;
	border-radius: 0.2rem
}

.shangjiajieshao {
	width: 70%;
	float: right;
	position: relative;
	height: 0;
	padding-bottom: 26%;
}

.dianpumingcheng {
	font-size: 0.26rem;
	font-weight: bold;
	line-height: 0.7rem;
}

.dianpupaiming {
	font-size: 0.2rem;
	line-height: 0.26rem;
	height: 0.54rem;
	color: #666;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dianpubiaoqian {
	font-size: 0.16rem;
	border: 1px solid #FF3F25;
	color: #FF3F25;
	padding: 1px 3px 1px 3px;
	position: absolute;
	bottom: 0;
	right: 0;
	border-radius: 0.1rem
}

.content_cont ul li {
	background: #fff;
    border-bottom: 2px solid #E9E9E9;
    border-right: 2px solid #E9E9E9;
    position: relative;
    margin: 0.2rem;
    box-shadow: 0 0 0.2rem #E5E5E5;
    border-radius: 0.1rem;
}

.noSJ {
	width: 100%;
	height: 8rem;
}

.noSJ img {
	width: 50%;
	margin: 10% auto;
	display: block
}

.noSJ h3 {
	width: 100%;
	font-size: 0.25rem;
	line-height: 0.6rem;
	font-weight: bold;
	text-align: center
}

.noSJ p {
	width: 100%;
	font-size: 0.24rem;
	line-height: 0.6rem;
	text-align: center
}
.merchant a .img{
    display: none;
}
.merchant a .img2{
    display: block;
}
.merchant a p{
    color: #FF3F25;
}
</style>
<script type="text/javascript">
// 	    $(function(){
// 	    	$('.navPOS').find('li').each(function () {
// 	    		$(this).find('a img').height($(this).find('a img').width());
// 			});
// 	    })
    
		function showText(text, numSub){
		    if(text == null){
		        return "";
		    }
		    if(text.length > numSub){
		        return text.substring(0, numSub) + "...";
		    }
		    return text;
		}
    </script>
</head>
<body>
	<input id="basePath" type="hidden" value="<%=basePath%>">
	<div class="header">
		<a class=returnInfo href="#" onclick="javascript:history.go(-1);"><i class="fa fa-angle-left"></i></a>
		<div class="header_bot clearFirx">
			<ul style="white-space: nowrap; width: 100%; display: block; overflow-x: auto; margin-left: 45px">
				<li class="active"><a href="javascript:;"
					onclick="classify(${item.classifyId})">全部</a></li>
				<c:forEach items="${classifyList}" varStatus="i" var="item">
					<li id="">
						<a href="javascript:;" onclick="classify(${item.classifyId})">${item.classifyName}</a>
					</li>
				</c:forEach>
			</ul>
		</div>
	</div>
	<div class="content">
		<!--     <div class="paixu clearFirx"> -->
		<!--         <ul> -->
		<!--             <li class="active"><a href="javascript:;">综合排序</a></li> -->
		<!--             <li><a href="javascript:;">好评优先</a></li> -->
		<!--             <li><a href="javascript:;">价格优先</a></li> -->
		<!--             <li><a href="javascript:;">筛选</a></li> -->
		<!--         </ul> -->
		<!--     </div> -->
		<c:choose>
			<c:when test="${not empty shopList}">
				<div class="content_cont">
					<ul id="ul">
						<c:forEach items="${shopList}" varStatus="i" var="item">
							<li><a
								href="<%=basePath%>app/goodsList?merchantId=${item.merchantId}"
								class="clearFirx">
									<div class="shangjiatupian" style="background-image: url(<%=basePath%>assets/images/dianpu.png);"></div>
									<div class="shangjiajieshao">
										<h3 class="dianpumingcheng">${item.merchantName}</h3>
										<p class="dianpupaiming">${item.merchartIntro}</p>
										<span class="dianpubiaoqian">${item.classifyName}</span>
									</div>
							</a></li>
						</c:forEach>
					</ul>
				</div>
			</c:when>
			<c:otherwise>
				<div class="noSJ">
					<img src="<%=basePath%>assets/images/bcz.png" alt="">
					<h3>没有找到你想要的商家呢！</h3>
					<p>试试别的选项吧！</p>
				</div>
			</c:otherwise>
		</c:choose>
		

	</div>
	<div class="noSJ" style="display: none">
		<img src="<%=basePath%>assets/images/bcz.png" alt="">
		<h3>没有找到你想要的商家呢！</h3>
		<p>试试别的选项吧！</p>
	</div>
</body>
<script>
	$(document).ready(function() {
		init()
	})
	function init(){
		$('.header_bot ul').find('li').each(function () {
			$(this).click(function () {
				$(this).siblings().removeClass('active');
				$(this).addClass('active');
			})
		})
           
		$('.content_cont').find('li').each(function(){
       		var text = $(this).find('.dianpupaiming')
       		text.text(showText(text.text(), 40))
       	})
            
        function showText(text, numSub){
            if(text == null){
                return "";
            }
            if(text.length > numSub){
                return text.substring(0, numSub) + "...";
            }
            return text;
        }
	}
    function classify(classifyId){
	    $.ajax({
	    	url: $("#basePath").val()+"app/getShopListByClassifyId",
	        timeout: 300000,
	        dataType: "json",
	        type: "post",
	        data: {
	        	"classifyId":classifyId,
	        	"merchantType":2
	        },
	        success: function (data) {
	            var html = "";
	            if(data.length > 0){
	            	$(".noSJ").css("display","none");
		            $.each(data, function (i, item) {
		                html += '<li>'+
	                   		'<a href="<%=basePath%>app/goodsList?merchantId='+item.merchantId+'" class="clearFirx">'+
			                    '<div class="shangjiatupian" style="background-image: url(<%=basePath%>assets/images/dianpu.png);"></div>'+
			                    '<div class="shangjiajieshao">'+
				                    '<h3 class="dianpumingcheng">'+item.merchantName+'</h3>'+
				                    '<p class="dianpupaiming">'+item.merchartIntro+'</p>'+
				                  	'<span class="dianpubiaoqian">'+item.classifyName+'</span>'+
			                    '</div>'+
		                   	'</a>'+
	                  	'</li>';
		            })
	            }else{
	            	$(".noSJ").css("display","block");
// 	            	html += '<div class="noSJ>'+
// 	            			'<img src="images/images/nosj_03.jpg" alt="">'+
// 	            			'<h3>没有找到你要的店铺呢！</h3>试试别的选项吧！'+
// 	            		'</div>'
	            }
	            $("#ul").html(html);
	            init();
	        }
	    })
    }
</script>
</html>